<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import BpmnModeler from 'bpmn-js'
const bpmnXmlStr = `<?xml version="1.0" encoding="UTF-8"?>
        <bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
          <bpmn2:process id="process1567044459787" name="流程1567044459787">
            <bpmn2:documentation>描述</bpmn2:documentation>
            <bpmn2:startEvent id="StartEvent_1" name="开始"/>
          </bpmn2:process>
          <bpmndi:BPMNDiagram id="BPMNDiagram_1">
            <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="process1567044459787">
              <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
                <dc:Bounds x="184" y="64" width="36" height="36"/>
                <bpmndi:BPMNLabel>
                  <dc:Bounds x="191" y="40" width="22" height="14"/>
                </bpmndi:BPMNLabel>
              </bpmndi:BPMNShape>
            </bpmndi:BPMNPlane>
          </bpmndi:BPMNDiagram>
        <processType id="test"/></bpmn2:definitions>`

const canvas = ref(null)
const init = () => {
  const bmp = new BpmnModeler({
    container: canvas.value
  })
  bmp.importXML(bpmnXmlStr, (err: any) => {
    if (err) {
      console.log("解析失败");
    } else {
      bmp.get("canvas").zoom("fit-viewport", "auto")
    }
  })
}

onMounted(() => {
  init()
})

</script>
<style >
.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;

}

.canvas {
  width: 1000px;
  height: 1000px;
}

.bjs-powered-by {
  display: none;
}
</style>